<template>
    <section class="area-wrapper">
      <el-form :inline="true" :model="searchInfo" class="area-wrapper_search">
        <el-form-item label="供应商">
          <el-input v-model="searchInfo.vendor" placeholder="请输入供应商"></el-input>
        </el-form-item>
        <el-form-item label="商品编码">
          <el-input v-model="searchInfo.goodsId" placeholder="请输入商品编码"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="searchInfo.goodsName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button class="mtb15" type="primary" @click="exportList">导出</el-button>
      <el-button class="mtb15" type="primary" @click="onCreate">创建委外加工入库单</el-button>
     <nb-table
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :fixedOne="fixedOne"
      select="select"
      @selectRow="selectRow"
      height="auto">
    </nb-table>
    <!-- 分页 -->
    <el-pagination
      align="right"
      style="padding-top: 20px;margin-bottom:100px;"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageData.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.pageSize"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</section>
</template>

<script>
import SeContent from '@/components/se-content.vue'
import SeForm from '@/components/se-form.vue'
import NbTable from '@/components/nb-table.vue'
import Pagination from '@/components/pagination.vue'
import {removeEmptyParams} from '@/common/utils'

const DEFAULT_DATA = {
  vendor: '',
  goodsId: '',
  goodsName: ''
}

export default {
  components: {
    SeContent,
    SeForm,
    NbTable,
    Pagination
  },
  data () {
    return {
      searchInfo: Object.assign({}, DEFAULT_DATA),
      pageData: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      },
      tableHeaders: [
        {headerKey: 'vendorName', headerName: '供应商(工厂)'},
        {headerKey: 'serialNo', headerName: '批次号'},
        {headerKey: 'goodsNo', headerName: '商品编码'},
        {headerKey: 'goodsName', headerName: '商品名称'},
        {headerKey: 'count', headerName: '可提货数'}
      ],
      tableData: [
        {vendorName: 'xxx公司', serialNo: 'PC00001', goodsNo: 'g0001', goodsName: 'xx香水', count: '2'},
        {vendorName: 'yyy公司', serialNo: 'PC00002', goodsNo: 'g0002', goodsName: 'xx香水', count: '3'},
        {vendorName: 'ccc公司', serialNo: 'PC00003', goodsNo: 'g0003', goodsName: 'xx香水', count: '2'},
        {vendorName: 'xxx公司', serialNo: 'PC00004', goodsNo: 'g0004', goodsName: 'xx香水', count: '3'}
      ],
      fixedOne: false,
      mutipleSelectList: []
    }
  },
  created () {
    // this.getGoodsList()
  },
  methods: {
    async getGoodsList () {
      const temp = removeEmptyParams(this.searchInfo)
      let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/page`, temp)
      this.tableData = data.records
      this.pageData.total = data.total
      this.pageData.pageSize = data.size
      this.pageData.currentPage = data.current
    },
    onQuery () {
      // this.getGoodsList()
    },
    onReset () {
      this.searchInfo = Object.assign({}, DEFAULT_DATA)
    },
    async exportList () {
      const temp = removeEmptyParams(this.searchInfo)
      let {data} = await this.$http.post(`/${this.const.PREFIX.MAINDATA}/mareas/page`, temp)
      console.log(data)
    },
    onCreate () {
      if (this.mutipleSelectList.length === 0) {
        this.$message.warning('请选择提货商品! ')
      } else {
        // 判断一下供应商是否相同，不同则不能创建委外加工入库单
        let list = [...new Set(this.mutipleSelectList.map(item => item.vendorName))]
        // list = [...new Set(list)]
        if (list.length > 1) {
          this.$message.warning('供应商相同才能合并创建一张入库单!')
        } else {
          this.$router.push('/osinbound/create')
        }
      }
    },
    delQueryModel () {},
    selectRow (list, row) {
      this.mutipleSelectList = list
    },
    sizeChangeHandle (val) {
      this.pageData.pageSize = val
      this.getGoodsList()
    },
    currentChangeHandle (val) {
      this.pageData.currentPage = val
      this.getGoodsList()
    }
  }
}
</script>
<style lang="scss">
.area-wrapper{
  &_search{
    background: white;
    padding: 20px 0 0 20px;
  }
}
.mtb15{
  margin: 15px 0;
}
</style>

